<template>
  <!-- 详情页面 -->
  <el-dialog title="工单任务详情" v-if="infoOpen" :visible.sync="infoOpen" :modal="false" width="1200px">
    <el-row class="task-content">
      <el-col :span="4" class="row-name">{{ taskInfo.rrTaskName }}</el-col>
      <el-col :span="12" style="margin-left: 10px">{{ taskInfo.rrTaskCode }}</el-col>
    </el-row>

    <el-descriptions :column="2" class="is-bordered" style="margin-bottom: 10px; margin-top: 20px" border>
      <el-descriptions-item label="创建人：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
        {{ taskInfo.createBy }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
        {{ taskInfo.createTime }}
      </el-descriptions-item>
      <el-descriptions-item label="任务进度：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
        <template>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="taskInfo.progress" status="success"></el-progress>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="合格/计划：" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
        {{ taskInfo.quantityQuanlify }}/{{ taskInfo.quantity }}
      </el-descriptions-item>
    </el-descriptions>

    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <!--        工单信息-->
          <div class="work-info">
            <div class="divider">
              <span class="label">工单信息</span>
            </div>

            <el-descriptions :column="2" style="margin-top: 40px" border>
              <el-descriptions-item label="工单编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ workorderInfo.repairCode }}
              </el-descriptions-item>
              <el-descriptions-item label="产品名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ workorderInfo.itemName }}
              </el-descriptions-item>
              <el-descriptions-item label="产品编码" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ workorderInfo.itemCode }}
              </el-descriptions-item>
              <el-descriptions-item label="规格型号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ workorderInfo.specification }}
              </el-descriptions-item>
              <el-descriptions-item label="单位" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ workorderInfo.unitOfMeasure }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!--        任务信息-->
          <div class="work-info">
            <div class="divider">
              <span class="label">任务信息</span>
            </div>
            <el-descriptions :column="2" style="margin-top: 40px" border>
              <el-descriptions-item label="任务编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.rrTaskCode }}
              </el-descriptions-item>
              <el-descriptions-item label="任务名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.rrTaskName }}
              </el-descriptions-item>
              <el-descriptions-item label="工作站名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.workstationName }}
              </el-descriptions-item>
              <el-descriptions-item label="车间名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.workshopName }}
              </el-descriptions-item>
              <el-descriptions-item label="工序编号" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.processCode }}
              </el-descriptions-item>
              <el-descriptions-item label="工序名称" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.processName }}
              </el-descriptions-item>
              <el-descriptions-item label="操作人" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.attr1 }}
              </el-descriptions-item>
              <el-descriptions-item label="计价方式" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                <dict-tag :options="dict.type.pro_pricing_method" :value="taskInfo.pricingMethod" />
              </el-descriptions-item>
              <el-descriptions-item label="计划数量" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                <el-tag type="danger" v-if="taskInfo.quantity !== taskInfo.quantityQuanlify">{{ taskInfo.quantity }}</el-tag>
                <el-tag type="success" v-else>{{ taskInfo.quantity }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="合格品数量" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                <el-tag type="success">{{ taskInfo.quantityQuanlify ? taskInfo.quantityQuanlify : 0 }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="不良品数量" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                <el-tag type="danger">{{ taskInfo.quantityUnquanlify ? taskInfo.quantityUnquanlify : 0 }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="计划开工时间" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.startTime }}
              </el-descriptions-item>
              <el-descriptions-item label="计划完工时间" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.endTime }}
              </el-descriptions-item>
              <el-descriptions-item label="工序说明" label-style="margin-bottom: 20px; margin-top: 20px;" content-style="margin-bottom: 20px; margin-top: 20px;">
                {{ taskInfo.attention }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="任务图纸" name="processPicture">
          <PdfView :url="this.url" :workorderId="taskInfo.rrWorkorderId" :processId="taskInfo.processId"></PdfView>
        </el-tab-pane>
        <el-tab-pane label="报工记录" name="fifth">
          <el-table v-loading="false" :data="feedbackList">
            <el-table-column label="报工类型" align="center" prop="feedbackType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.mes_feedback_type" :value="scope.row.feedbackType" />
              </template>
            </el-table-column>
            <el-table-column label="工作站" width="150px" align="center" prop="workstationName" />
            <el-table-column label="生产工单编号" width="150px" align="center" prop="workorderCode" :show-overflow-tooltip="true" />
            <el-table-column label="产品物料编码" width="120px" align="center" prop="itemCode" />
            <el-table-column label="产品物料名称" width="150px" align="center" prop="itemName" :show-overflow-tooltip="true" />
            <el-table-column label="规格型号" align="center" prop="specification" />
            <el-table-column label="报工数量" align="center" prop="quantityFeedback">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.quantityFeedback }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="合格数量" align="center" prop="quantityQualified">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.quantityQualified }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="不良数量" align="center" prop="quantityUnquanlified">
              <template slot-scope="scope">
                <el-tag type="danger">{{ scope.row.quantityUnquanlified }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="报工人" align="center" prop="nickName" />
            <el-table-column label="报工时间" align="center" prop="feedbackTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.feedbackTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核人" align="center" prop="recordNick" />
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.mes_order_status" :value="scope.row.status" />
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getProFeedbackList" />
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleEnd" v-if="optType == 'save'">确认完工</el-button>
        <el-button type="primary" @click="infoOpen = false">返 回</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { finish, getTaskInfo } from '@/api/mes/rr/rrtask'
import { listFeedback } from '@/api/mes/pro/feedback'
import PdfView from '@/components/pdfView/view.vue'
import { listAccessory } from '@/api/mes/wm/accessoryline'

export default {
  name: 'rrTaskInfo',
  components: { PdfView },
  dicts: ['mes_order_status', 'mes_feedback_type', 'pro_pricing_method'],
  data() {
    return {
      url: '/rr/retrunrepairline/getList',
      infoOpen: false,
      activeName: 'first',
      tabIndex: 0,
      taskInfo: {},
      workorderInfo: {},
      xsSalesOrder: {},
      feedbackList: [],
      workorderItemList: [],
      issueheaderList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        rrTaskId: null,
        rrWorkorderId: null,
        status: 'FINISHED'
      }
    }
  },
  props: {
    optType: undefined
  },
  activated() {
    this.init(this.$route.query.rrTaskId)
    this.queryParams.rrTaskId = this.$route.query.rrTaskId
    this.activeName = 'first'
    this.tabIndex = 0
  },
  methods: {
    init(rrTaskId) {
      getTaskInfo(rrTaskId).then((response) => {
        if (response.code == 200 && response.data) {
          this.taskInfo = response.data.taskInfo
          this.title = this.taskInfo.rrTaskName + '&emsp;&emsp;&emsp;' + this.taskInfo.rrTaskCode
          this.workorderInfo = response.data.workorderInfo
          this.infoOpen = true
          this.activeName = 'first'
          this.tabIndex = 0
        }
      })
    },
    handleClick(tab, event) {
      this.tabIndex = tab.index
      if (tab.index == 1) {
        //获取物料清单
        this.queryParams.rrTaskId = this.taskInfo.rrTaskId
        this.queryParams.workorderId = this.workorderInfo.workorderId
        this.queryParams.pageNum = 1
        //this.getItemList()
      } else if (tab.index == 2) {
      } else if (tab.index == 3) {
        this.queryParams.rrTaskId = this.taskInfo.rrTaskId
        this.queryParams.pageNum = 1
        //this.getIssueList()
      } else if (tab.index == 4) {
        this.queryParams.rrTaskId = this.taskInfo.rrTaskId
        this.queryParams.pageNum = 1
        //this.getRtIssueList()
      } else if (tab.index == 5) {
        this.getProFeedbackList()
      } else if (tab.index == 6) {
        this.queryParams.rrTaskId = this.taskInfo.rrTaskId
        this.queryParams.pageNum = 1
        this.getAccessoryList()
      }
    },

    getProFeedbackList() {
      this.queryParams.status = 'FINISHED'
      this.queryParams.rrTaskId = this.taskInfo.rrTaskId
      listFeedback(this.queryParams).then((response) => {
        if (response.code == 200 && response.rows) {
          this.feedbackList = []
          this.feedbackList = response.rows
          this.total = response.total
        }
      })
    },
    getItemList() {
      this.workorderItemList = []
      this.queryParams.rrTaskId = this.taskInfo.rrTaskId
      this.queryParams.workorderId = null
      this.queryParams.status = null
      listTaskBom(this.queryParams).then((response) => {
        if (response.code == 200 && response.rows) {
          this.workorderItemList = response.rows
          this.total = response.total
        }
      })
    },
    //领料记录
    getIssueList() {
      this.queryParams.status = 'FINISHED'
      getlistIssueline(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.issueheaderList = response.rows
          this.total = response.total
        }
      })
    },

    //完工
    handleEnd() {
      let msg = '任务完工后将不可报工，是否确认完工？'
      if (this.taskInfo.quantity != this.taskInfo.quantityQuanlify) {
        msg = '计划数量与实际生产数量不一致，完工后将不可报工，是否确认完工？'
      }
      this.$modal
        .confirm(msg)
        .then(() => {
          return finish({ rrTaskId: this.taskInfo.rrTaskId })
        })
        .then(() => {
          this.infoOpen = false
          this.$parent.getList()
          this.$modal.msgSuccess('完工成功')
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss">
.row-name {
  width: 24.666667%;
  white-space: nowrap; // 强制一行显示
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; // 省略号
}

.work-info {
  margin: 20px;
}

.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.el-descriptions .is-bordered {
  table-layout: fixed !important;
}

.task-content {
  margin-top: -15px;
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #262626;
  text-align: left;
  line-height: 20px;
}
</style>
